<template>
  <div class="container">
    <div class="present-wrap">
      <i class="iconfont icon-present"></i>
      <p class="big-txt">奖品编号：123456789</p>
    </div>
    <div class="content-wrap">
      <p class="mid-txt">领取方式：</p>
      <p class="light-txt">凭借奖品编号于2018年12月12日之前到以下指定门店领取</p>
      <p class="mid-txt mid-position">支持门店：</p>
      <ul>
        <li v-for="item in clubs">
          <p class="com-txt">{{item.name}}</p>
          <p class="light-txt">{{item.addr}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Present',
  data () {
    return {
      clubs: [
        {
          name: '上海国会店',
          addr: '上海市陆家嘴路'
        },
        {
          name: '上海国会店1',
          addr: '上海市陆家嘴路'
        },
        {
          name: '上海国会店2',
          addr: '上海市陆家嘴路'
        }
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "../../common/styles/recg-com.styl"
.present-wrap{
  width 100%
  .icon-present{
    font-size 5rem
    color #ffb68a
    margin 1.875rem
  }
  .big-txt{
    font-size 1rem
    font-weight bold
    text-align center
  }
}
.content-wrap{
  width 100%
  box-sizing border-box
  padding 0 0.9375rem
  margin-top 2.1875rem
  .mid-txt{
    font-size 0.875rem
    font-weight bold
  }
  .com-txt{
    font-size 0.875rem
    margin-top 0.9375rem
  }
  .light-txt{
    font-size 0.875rem
    color $rcg_lightFont
    margin-top 0.625rem
  }
  .mid-position{
    margin-top 2.5rem 
  }
}
</style>


